<template>
  <el-container class="contain-box">
    <el-collapse @change="handleCollapseChange"  v-model="collapseActiveName" v-if="showSearch">
      <el-collapse-item :title="collapseTitle" name="1">
        <el-tabs type="border-card">
          <slot name="search"></slot>
        </el-tabs>
      </el-collapse-item>
    </el-collapse>
    <el-header class="contain-header" :height="headerHeight">
      <slot name="header"></slot>
      <table-filter :getColumnsRoute="getColumnsRoute"></table-filter>
    </el-header>
    <el-main style="height:100%">
      <slot name="main"></slot>
    </el-main>
    <el-footer v-if="showFooter">
      <pagination-view  :pagesize="pageInfo.pageSize"
        :total="total"
        :currentPage="page"
        :page_size="page_size"
        :pageSizes="page_sizes"
        @size-change="handleSizeChange"
        @current-change="handleNumberChange">
      </pagination-view>
    </el-footer>
    <slot name="other"></slot>
  </el-container>
</template>

<script>
  import TableFilter from '@/components/TableFilter'
  import PaginationView from '@/components/PaginationView'

  export default {
    name: "ContainBox",
    data(){
      return {
        collapseTitle: '点击展开搜索'
      }
    },
    methods: {
      handleCollapseChange(val) {
        if(val && val.length > 0) {
          this.collapseTitle = '点击关闭搜索'
        } else {
          this.collapseTitle = '点击展开搜索'
        }
      }
    },
    components: {
      TableFilter,
      PaginationView
    },
    props: {
      showSearch: {  // 是否展示搜索框
        type: Boolean,
        default: false
      },
      showFooter: {
        type: Boolean,
        default: false
      },
      total: {       // 分页总和
        type: Number,
        default: 0
      },
      page: {       // 分页页数
        type: Number,
        default: 0
      },
      page_size: {       // 分页每页数量
        type: Number,
        default: 0
      },
      page_sizes: {
        type: Array,
        default: function () {
          return [10, 20, 50, 100]
        }
      },
      handleSizeChange: {
        type: Function
      },
      handleNumberChange: {
        type: Function
      },
      headerHeight: {  // 头部的高度
        type: String,
        default: '60px'
      },
      getColumnsRoute: {  // 过滤接口
        type: String
      }
    }

  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .contain-box{
    height: calc(100vh - 50px);
    padding: 0 20px;
    .contain-header{
      padding: 10px 10px 0;
    }
  }
</style>
